<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function f(a,b,c){
                //获取到对应的元素的DOM对象
                var currentDom=document.getElementById(a);
                var otherDom1=document.getElementById(b);
                var otherDom2=document.getElementById(c);

                //判断当前节点是否是隐藏状态
                if(currentDom.style.display=="none"){
                    currentDom.style.display="block";
                    otherDom1.style.display="none";
                    otherDom2.style.display="none";
                    return;
                }
                // 当前节点是否是显示状态
                currentDom.style.display="none";
            }
        </script>
    </head>
    <body>
        <h2 onclick="f('u1','u2','u3')">您最最喜欢的动画片</h2>
        <ul style="display: none;" id="u1">
            <li>奶龙</li>
            <li>萌鸡小队</li>
            <li>小猪佩奇</li>
        </ul>
        <h2 onclick="f('u2','u1','u3')">您最最喜欢的电影</h2>
        <ul style="display: block;" id="u2">
            <li>哪吒之魔童降世</li>
            <li>熊出没</li>
            <li>姜子牙</li>
        </ul>
        <h2 onclick="f('u3','u1','u2')">您最最喜欢的综艺节目</h2>
        <ul style="display: none;" id="u3">
            <li>极限挑战</li>
            <li>奔跑吧</li>
            <li>向往的生活</li>
        </ul>
    </body>
</html>